import Footer from "@/components/Commons/Footer";
import Header from "@/components/Commons/Header";
// import img1 from "@/assets/img/beauty/IMG_20240803_174712.jpg";
// import img2 from "@/assets/img/beauty/IMG_20240803_182103.jpg";
// import img3 from "@/assets/img/beauty/IMG_20240803_182651.jpg";
// import img4 from "@/assets/img/beauty/IMG_20240803_182659.jpg";
import gsap from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";
import React, { useLayoutEffect } from "react";
import "./index.css";

gsap.registerPlugin(ScrollTrigger);

function HomePage(params) {
  // 监听滚动事件
  useLayoutEffect(() => {
    const parallaxElements = document.querySelectorAll(".image");

    parallaxElements.forEach((element) => {
      gsap.fromTo(
        element,
        {
          backgroundPositionY: `-${window.innerHeight / 2}px`,
        },
        {
          backgroundPositionY: `${window.innerHeight / 2}px`,
          scrollTrigger: {
            ease: "none",
            yoyo: true,
            trigger: element,
            scrub: true, // 平滑滚动效果
            start: "top bottom",
            end: "bottom top",
          },
        }
      );
    });
  }, []);

  return (
    <div>
      <div className="Header-container">
        <Header />
      </div>
      <div className="image-container">
        <div className="image1 image"></div>
        <div className="image2 image"></div>
        <div className="image3 image"></div>
        <div className="image4 image"></div>
      </div>
      <div className="Footer-container">
        <Footer />
      </div>
    </div>
  );
}

export default HomePage;
